<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/HanderFooter2.css">
    <link rel="stylesheet" type="text/css" href="css/details.css">
    <style>
        body {
            background-color: white;
        }

        .pdetail {
            width: 100%;
            height: calc(100% - 80px);
            background: white;
            float: left;
            margin-top: 50px;
        }

        .leftmenu {
            width: 70px;
            height: 100%;
            text-align: left;
            float: left;
            margin-right: 5%;
            margin-left: 80px;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .h50 {
            height: 50px
        }

        #mainImg {
            width: 100%;
            min-width: 360px;
        }

        .fs13 {
            font-size: 13px !important;
            color: #333333
        }

        .fwb {
            font-weight: bold
        }

        .pdetail.leftmenu {
            width: 16%;
            height: 100%;
            text-align: left;
            float: left;
            margin-right: 5%;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .img-thumbnail {
            padding: 4px;
            margin-bottom: 10px;
            line-height: 1.42857143;
            background-color: #f7f4f1;
            border: 1px solid #dddddd;
            border-radius: 3px;
            transition: all 0.2s ease-in-out;
            display: inline-block;
            max-width: 100%;
            cursor: pointer;
        }

        .imgpd img {
            width: 30%;
        }
    </style>
</head>
<body>
<div style="overflow: hidden">
    <el-container>
        <el-header style="padding: 0;height: auto">
            <div id="header-navbar"> 地平线8号 尽管出发 创造不凡</div>
            <div class="header222" style="overflow:hidden;background-color: white">
                <div style=" width:20%;float: left;overflow:hidden; padding-top: 20px">
                    <img src="./images/logo.png" alt=""
                         style="float: left;margin-left:100px;padding-bottom:15px;width: 120px">
                </div>
                <div id="app" style="float: left ;
                     vertical-align: bottom;
                      width: 30%;
                     padding-left: 20px;">
                    <el-menu :default-active="activeIndex"
                             text-color="#000"
                             mode="horizontal"
                             active-text-color="#ffd04b">
                        <el-menu-item
                                style="margin-top: 1px; margin-left:80px;font-size: 17px;width: 15%;text-align: center"
                                index="1">商城
                        </el-menu-item>
                        <el-menu-item
                                style=" margin-top: 1px;margin-left:80px;font-size: 17px;width: 15%;text-align: center"
                                index="2">周边
                        </el-menu-item>
                    </el-menu>
                </div>
                <div class="rightMenu" style="float:right;padding-top: 15px;width:25%">
                    <input class="form-control menuipt" placeholder="请输入搜索内容">

                    <div class="right icons soushuo" data-menu="2" style="margin-right: 30px;" style="width: 70%">

                        <img src="./img/seach.png" class="iconimg1" style="width: 70%">
                    </div>
                    <div class="right icons" data-menu="0" onclick="window.location.href='/font/shoppingCart'"
                         style="margin-right: 20px;position: relative;">
                        <div id="cartNum"
                             style="position: absolute;top:-6px;right:-6px;background: red;color: #fff;width:16px;height:16px;display:flex;justify-content:center;align-items:center;font-size: 12px;border-radius: 50%;letter-spacing: 0px">
                            0
                        </div>
                        <img src="./img/shoppingcart.png" class="iconimg1" style="width: 70%">
                    </div>
                    <div class="right icons" data-menu="1">
                        <img src="./img/people.png" class="iconimg1" style="width: 70%">
                    </div>

                </div>

            </div>
        </el-header>

        <el-main>
            <div class="wb100 pdetail">
                <div class="leftmenu tal">
                    <img src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/8672b753-0189-45cc-8d56-2eb034e0e005.jpg"
                         class="img-thumbnail pimg">
                    <img src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/93a4d7b9-6917-4080-b1ef-1c508744474f.jpg"
                         class="img-thumbnail pimg"><img
                        src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/4fd27b9d-1d9c-4f5c-be47-1569d5e27d56.jpg"
                        class="img-thumbnail pimg"><img
                        src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/1eff0308-8bdd-4797-adff-40ba7de39441.jpg"
                        class="img-thumbnail pimg">
                    <img src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/d2a9785c-5f7f-4d80-96d4-ef5e9bb872a4.jpg"
                         class="img-thumbnail pimg"></div>
                <div class="rightMenu">
                    <div class="transaction">
                        <div class="allproduct">
                            <div class="product">
                                <div class="productImg">
                                    <img id="mainImg"
                                         src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/8672b753-0189-45cc-8d56-2eb034e0e005.jpg"
                                         data-id="0">
                                </div>
                            </div>
                            <div class="productMsg">
                                <div class="msgname" style="font-size: 26px">飞行家登机箱 银色</div>
                                <div class="line40"
                                     style="box-sizing:border-box;height:40px;margin: 6px 0 10px;display: flex"><span
                                        class="fs15 fwb pr">¥<span style="font-size: 26px;color:#333;margin-left:6px">1339</span></span>
                                    <span class="ml10 org"
                                          style="padding-top: 4px; color: rgb(153, 153, 153); text-decoration: line-through; display: block;">¥1499</span>
                                </div>
                                <div class="purchase">
                                    <div style="width: 22px;margin-right: 8px"><img src="/pc/img/time.png"
                                                                                    style="width: 100%"></div>
                                    <div style="font-size: 19px;font-weight: bold;margin-right: 18px" id="purchaseName">
                                        限时购
                                    </div>
                                    <div class="purchase-time">
                                        <div class="purchase-time-block" id="day"></div>
                                        <span>天</span>
                                        <div class="purchase-time-block" id="hour"></div>
                                        <span>时</span>
                                        <div class="purchase-time-block" id="minite"></div>
                                        <span>分</span>
                                        <div class="purchase-time-block" id="second"></div>
                                        <span>秒</span>
                                    </div>
                                </div>

                                <div class="bdb line40" style="padding-bottom:2px;color:#000">
                                    <button class="btn btn-fist fs12 "
                                            style="background-color: #FFD637;color:white;border:0;padding:0 2px">出发币
                                    </button>
                                    <span class="fs13 integra" style="color: #333">购买可获得 1499 出发币</span>
                                </div>
                                <div id="present"
                                     style="width: 250px;height: 1px;border-bottom: 1px solid rgba(136,136,136,0.25)"></div>
                                <div class="fs13 line50 fwb"><span class="colorHtml">颜色:银色</span></div>
                                <div class="h50 bdb allProductColor"
                                     style="display: flex;margin-top: 6px;border-bottom: 1px solid rgba(136,136,136,0.25)">
                                    <div id=""
                                         style="width: 22px;height:22px;margin-right:14px;border-radius:50%;display: flex;justify-content: center;align-items: center;float: left"
                                         class="colorBorder"><img style="width: 20px;height: 20px;border-radius: 60px;"
                                                                  src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/d1ce2aca-0a7a-4fb4-9b07-19808e148b0d.png"
                                                                  data-images="https://level8cases.oss-cn-hangzhou.aliyuncs.com/8672b753-0189-45cc-8d56-2eb034e0e005.jpg,https://level8cases.oss-cn-hangzhou.aliyuncs.com/93a4d7b9-6917-4080-b1ef-1c508744474f.jpg,https://level8cases.oss-cn-hangzhou.aliyuncs.com/4fd27b9d-1d9c-4f5c-be47-1569d5e27d56.jpg,https://level8cases.oss-cn-hangzhou.aliyuncs.com/1eff0308-8bdd-4797-adff-40ba7de39441.jpg,https://level8cases.oss-cn-hangzhou.aliyuncs.com/d2a9785c-5f7f-4d80-96d4-ef5e9bb872a4.jpg"
                                                                  data-pname="" data-endtime="" data-colortype="颜色:银色"
                                                                  data-id="1000027" data-integra="1499"
                                                                  data-price="1339" data-orgin="1499"
                                                                  class="color-img active csp"></div>
                                </div>
                                <div class="line50 h50 bdb" id="parameter"
                                     style="cursor: pointer;border-bottom: 1px solid rgba(136,136,136,0.25)">
                                    <span class="fs14 fwb left">产品参数</span>
                                    <i class="right iconfont icon-jiahao"></i>
                                </div>
                                <div id="parameterDetail"
                                     style="padding-top: 10px;display:none;padding-bottom:10px;color: #999;font-size:12px;margin-bottom: 16px"
                                     class="bdb">
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>品牌</div>
                                        <div>地平线8号（ LEVEL8 ）</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>尺寸</div>
                                        <div>登机箱 20英寸</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>高度 长度 宽度</div>
                                        <div>56 x 38.2 x 21.4 CM</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>净重</div>
                                        <div>约4.6 KG</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>容量</div>
                                        <div>约36 L</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>颜色</div>
                                        <div>银色</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>箱包硬度</div>
                                        <div>硬</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>材质</div>
                                        <div>铝镁合金</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>闭合方式</div>
                                        <div>锁扣</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>锁的类型</div>
                                        <div>TSA密码锁</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>滚轮样式</div>
                                        <div>双轴承万向轮</div>
                                    </div>
                                    <div style="line-height:22px;display:flex;justify-content:space-between">
                                        <div>货号</div>
                                        <div>1695</div>
                                    </div>
                                </div>

                                <div style="display: flex;flex-direction: column">
                                    <button class="btn guaranBtn clr wb100 bd mt30 h40 shopCart"
                                            style="font-weight: bold;margin-top: 20px;height:50px;background-color: white ;cursor: pointer">
                                        加入购物车
                                    </button>
                                    <button class="btn guaranBtn clr wb100 bd white mt20 white txOrder confrimBtn"
                                            style="background: black;margin-top: 20px;height:50px;color: white;cursor: pointer">
                                        立即购买
                                    </button>
                                </div>
                                <div class="line40 h40">
                                    <i class="iconfont icon-fenxiang fs16"></i>
                                    <span>分享可得 10 个出发币</span>
                                </div>
                            </div>
                        </div>
                        <div id="composeTitle"
                             style="font-size: 24px; margin-left: calc(13vw - 10px); margin-top: 80px; color: rgb(0, 0, 0); display: none;">
                            组合购
                        </div>
                        <div class="compose" onclick="" style="display: none;">
                            <div class="compose-left">
                                <div class="compose-img"><img style="width: 100%"></div>
                                <div>
                                    <div class="compose-name"
                                         style="font-size:18px;margin-bottom:6px;letter-spacing:1px;color: #000"></div>
                                    <div style="font-size:16px;color: #000;letter-spacing: 0.2px">最多可省 <span
                                            style="color:rgb(236, 85, 65)" class="compose-price"></span></div>
                                </div>
                            </div>
                            <div class="compose-right">
                                <img src="/pc/img/z-face-right.png" style="width: 100%;">
                            </div>
                        </div>
                        <div class="introduction" style="width:74vw;margin: 0 auto;">

                            <img src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_01-e9cb1435-9097-41ae-b429-92f89b40d468.jpg"
                                 class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_02-0c52e8ab-62a5-4778-8f11-e7d7f7330528.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_03-34707984-a066-4778-9ed4-438a40db1b64.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_04-ae644101-097a-47f5-9830-f3348ad979a4.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_05-ebb66974-c482-4d0e-90be-77c1114a0611.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_06-42ac744e-22be-44ea-bfb7-04f989337153.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_07-2b717b17-c5db-453e-94c9-7b53f82d16cb.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_08-df59c72b-55dc-4d86-901c-26b700a5608f.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_09-7c966066-edca-43f8-93e2-07765dbe9925.jpg"
                                class="wb100"><img
                                src="https://level8cases.oss-cn-hangzhou.aliyuncs.com/代言人详情-铝箱_10-64a8ccfe-0cc6-41eb-8d4c-c9a42db29b9f.jpg"
                                class="wb100"></div>
                        <div class="evaluate" style="border-top: 1px solid #ededed;padding: 50px 80px;">
                            <div class="line40 evaluate-score"
                                 style="padding-bottom: 8px;border-bottom: 1px solid #ededed;margin-bottom:10px">
                                <span class="fwb fs18">商品评价</span>
                                <span class="fs14 ml20 rate-num">0 条评论</span>
                                <span class="right fs18 fwb score">4.3</span>
                                <i class="iconfont icon-xingxing fs18 right mr5"></i><i
                                    class="iconfont icon-xingxing fs18 right mr5"></i><i
                                    class="iconfont icon-xingxing fs18 right mr5"></i><i
                                    class="iconfont icon-xingxing fs18 right mr5"></i></div>
                            <div class="evaluate-content"></div>

                        </div>
                        <div class="tac wb100 h40">
                            <button class="btn evaluateBtn btn-default clr w200 bd ">查看全部评价</button>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer style="height: auto;padding: 0">
            <div class="footModal clr">
                <div class="fmodal">
                    <div style="display: flex">
                        <div class="foot shop-mart">
                            <div class="fs16 fwb line40" style="color:#000">商 城</div>
                            <div class="fs12 fwb  line24" onclick="category(0)">全部商品</div>
                            <div class="fs12 fwb  line24" onclick="category(10037)">新品上市</div>
                            <div class="fs12 fwb  line24" onclick="category(10000)">登机/托运</div>
                            <div class="fs12 fwb  line24" onclick="category(10024)">材质分类</div>
                            <div class="fs12 fwb  line24" onclick="category(10039)">镇店爆款</div>
                            <div class="fs12 fwb  line24" onclick="category(10038)">明星推荐</div>
                            <div class="fs12 fwb  line24" onclick="category(10017)">联名设计</div>
                            <div class="fs12 fwb  line24" onclick="category(10012)">旅行配件</div>
                        </div>
                        <div class="foot">
                            <div class="fs16 fwb line40 hover-item" style="color:#000" onclick="category(10012)">周 边
                            </div>
                            <div class="fs12 fwb line24 hover-item" onclick="category(10014)">收纳系列</div>
                            <div class="fs12 fwb  hover-item" onclick="category(10015)">生活周边</div>
                            <div class="foot-a">
                                <a target="_blank" href="https://weibo.com/level8official"><img src="img/1.png"></a>
                                <a target="_blank" href=" "><img src="img/2.png"></a>
                                <a target="_blank" href="https://www.instagram.com/level8_official/"><img
                                        src="img/3.png"></a>
                                <a target="_blank" href="https://www.facebook.com/pg/Level8Group/shopify"><img
                                        src="img/4.png"></a>
                            </div>
                        </div>
                    </div>
                    <style>
                        .hover-item {
                            cursor: pointer;
                        }
                    </style>
                    <div class="follow" style="display: flex;flex-direction: column;justify-content: space-between">
                        <div>
                            <div class="followimg">
                                <img src="img/7.png" style="margin-bottom:4px">
                                <div class="fs12 fwb line30h30">关注公众号</div>
                            </div>
                            <div class="followimg" style="margin-right: 40px;">
                                <img src="img/7.jpg" style="margin-bottom:4px">
                                <div class="fs12 fwb line30h30">绑定产品</div>
                            </div>
                        </div>
                        <div class="clr">
                            <input class="form-control-bottom left searchipts" placeholder="搜索关键词">
                            <a href="www.baidu.com">
                                <div class="bg-black left  tac searchimgs"
                                     style="display: flex;align-items: center;justify-content: center">
                                    <img src="img/51.png"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" tar foottext">
                <span class=" foottext1"> ©Copyright Level8 2020 </span>
                <span class=" foottext2"> level8@level8cases.com</span>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
</html>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: function () {
            return {
                visible: false,
                activeIndex: '1',
                activeIndex2: '1',
                input: '',


            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }

        }

    })
</script>